Skip to main content

Email field

The Email Field component is a specialized input tool designed for capturing email addresses from users. This component is particularly useful for applications that require users to provide a valid email address, such as account registration, contact forms, or newsletter subscriptions. By using the Email Field, businesses can enhance the user experience by providing a dedicated interface for email entry, ensuring that the input is correctly formatted and valid. The component includes built-in email validation to prevent errors and ensure that only legitimate email addresses are accepted, thereby maintaining data integrity and enhancing communication capabilities.

Properties​

To effectively utilize the Email Field component, the following data and attributes are necessary:

  • Component-Level Attributes:
    • Code: A unique identifier for the Email Field component, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the component.
    • Answer: A default email address that can be presented to the user, which is empty by default. Arrows are provided to reset the default answer, allowing users to start with a blank field if desired.
    • Label: The text displayed beside the email field, providing context and clarity to the user about the type of input required.
  • Validation and Interaction Attributes:
    • Invalid Email Message: The message displayed to the user if the input is not a valid email address. This feature provides immediate feedback, helping users correct their input.
    • Mandatory Field: A setting (default is OFF) that specifies whether the email field is required to be completed as part of a form. This ensures that users provide necessary input before proceeding.
    • Help: An optional feature (default is OFF) that displays help text beside the group title, offering additional guidance or information to the user.
    • Enabled: A setting (default is ON) that determines whether the email field is active and can be interacted with by the user. If disabled, the field is visually indicated as inactive, preventing user interaction.

By structuring the Email Field component with these attributes, businesses can create a flexible and user-friendly interface that effectively captures and validates email addresses. The ability to provide validation feedback, offer help text, and control user interaction ensures that the component remains a powerful tool for enhancing application functionality and user experience.

Style​

Best Practices​

  • Clarity and Usability: Ensure that the email field is clearly labeled to indicate its purpose. Use descriptive labels such as "Enter your email" to guide users.
  • Input Validation: Implement real-time validation to check if the entered text is in a valid email format (e.g., [email protected]), providing immediate feedback to users.
  • Accessibility: Make sure the email field is accessible by providing proper labels and ensuring it can be navigated using keyboard shortcuts and screen readers.

Highest Value Features​

  • Placeholder Text: Use placeholder text to provide examples of the expected input format (e.g., "[email protected]"), which helps users understand what is required.
  • Error Handling: Clearly indicate errors in email input with visual cues and descriptive messages to help users correct their entries.
  • Copy and Paste Functionality: Allow users to easily copy and paste email addresses, enhancing usability.

All the Settings​

Border​

  • BORDER: Customize the border style, width, and color of the email field to define its outline and separation from other elements. Use the following settings:
    • BORDER OPTIONS:
      • Style: solid, dashed, dotted, etc.
      • Width: specify the thickness of the border in pixels.
      • Color: choose a color using a color picker or HEX, RGBA, HSLA values.

Padding​

  • PADDING: Adjust the padding around the email field to create space between the text and the border. Use the following settings:
    • PADDING OPTIONS:
      • Icon: all padding, top padding, left padding, bottom padding, right padding.
      • Size: in pixels using up and down arrows or by entering a numeric value.

Background​

  • BACKGROUND: Customize the background of the email field using the following settings:
    • BACKGROUND OPTIONS:
      • Background Color: Set the background color using a color picker or enter values in HEX, RGBA, or HSLA format.
      • Image: Select an image from the media library or provide a URL for an online image.
      • Background Attachment: Choose how the background behaves with options like scroll, fixed, local, initial, or inherit.
      • Background Position X/Y: Adjust the position of the background image along the X-axis (horizontal) and Y-axis (vertical) using pixel values.
      • Background Repeat: Control how the background image repeats with options like repeat, repeat-x, repeat-y, no-repeat, initial, or inherit.
      • Background Size: Set the size of the background image to auto, cover, contain, or use specific dimensions.
      • Background Origin: Define the positioning area of the background with options like border-box, padding-box, content-box, initial, or inherit.

Label Font​

  • LABEL FONT: Customize the font of the label for the email field using the following settings:
    • FONT OPTIONS:
      • Alignment: left, center, right, aligned.
      • Font type: choose from available font families.
      • Font-size: number expressed in px, em, or rem (where "em" is relative to the font size of the element itself, and "rem" is relative to the root element's font size).
      • Letter spacing: in pixels.
      • Line height: in pixels.
      • Style: normal, italic, oblique, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Weight: thin, extra light, light, normal, medium, semi bold, bold, extra bold, black.
      • Color: picker or values in HEX, RGBA, HSLA.
      • Stretch: Normal, semi condensed, condensed, extra condensed, ultra condensed, semi expanded, expanded, extra expanded, ultra expanded.
      • Variant: normal, small caps, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Caps variant: normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial (inherits the browser’s default), inherit (inherit from the parent element).
    • Design System: By default this follows the "Label medium" on the active design system.

Answer Font​

  • ANSWER FONT: Customize the font of the text displayed in the email field using the following settings:
    • FONT OPTIONS: (same as above).

Input Field Border​

  • INPUTFIELD BORDER: Customize the border of the input field containing the email using the following settings:
    • BORDER OPTIONS: (same as above).
  • Design System: By default with on focus this follows the "Accent one" on the active design system.

Explanation of Terms​

  • Initial: Sets the property to its default value as defined in the CSS specification.
  • Inherit: Makes the element inherit the property from its parent element.
  • em/rem: Relative units based on the font size of the element or root element, respectively. An "em" is relative to the font size of the element itself, while a "rem" is relative to the font size of the root element (usually the <html> element).

This style guide provides a comprehensive overview of the styling options available for the Email Field component in NoCode-X, ensuring users can create visually appealing and functional designs.

Actions​

Event: On Change​

  • This action is executed whenever the email field is changed and then exited from focus by the user.
  • It allows for validation or processing of the email input based on the user's modifications.

Compatible functions​

  • Disable email input field
  • Get value of email input field
  • Set email input field as required
  • Set invalid message of email input field
  • Set value of email input field